<template>
	<view id='cu-circle' class="cu-circle" :style="{height: sizeNum + 'px'}">
		<canvas :canvas-id="'cu-circle-'+cid" :style="{width: sizeNum + 'px', height: sizeNum + 'px'}"></canvas>
		<view class="content">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import CommonComponentMixin from '../../mixins/common-component-mixin.js';
	export default {
		mixins: [CommonComponentMixin],
		props: {
			cid: {
				type: String,
				require: true
			},
			progressColor: { //进度颜色
				type: String,
				default: '#409EFF'
			},
			isRing: { //是否是环形
				type: Boolean,
				default: true
			},
			bgColor: { //背景颜色
				type: String,
				default: '#FFFFFF'
			},
			strokeColor: { // 轨道颜色
				type: String,
				default: '#F9FAFB'
			},
			size: { //整体大小 px
				type: Number,
				default: 0
			},
			strokeWidth: { //轨道宽度 px
				type: Number,
				default: 20
			},
			percent: { //进度百分比
				type: Number,
				default: 0,
				validator: function(value) {
					return value >= 0 && value <= 100;
				}
			},
		},
		data() {
			return {
				sizeNum: this.size,
				strokeWidthNum: this.strokeWidth,
				initAdaptiveSizeInterval: null
			}
		},
		watch: {
			percent: {
				handler(newVal) {
					this.drawCircle(newVal);
				},
				immediate: true
			},
			sizeNum: {
				handler(n) {
					if (n) {
						this.clearInitAdaptiveSizeInterval();
					}
				},
				immediate: true
			}
		},
		mounted() {
			if (!this.sizeNum) {
				this.$nextTick(() => {
					this.initAdaptiveSize();
				})
			}
		},
		beforeDestroy() {
			this.clearInitAdaptiveSizeInterval();
		},
		methods: {
			clearInitAdaptiveSizeInterval() {
				if (this.initAdaptiveSizeInterval) {
					clearInterval(this.initAdaptiveSizeInterval);
					this.initAdaptiveSizeInterval = null;
				}
			},
			initAdaptiveSize() {
				const query = uni.createSelectorQuery().in(this)
				query.select(`#cu-circle`).boundingClientRect((res) => {
					if (res && res.width) {
						this.sizeNum = res.width;
					} else {
						this.clearInitAdaptiveSizeInterval();
						this.initAdapativeSizeInterval = setInterval(() => {
							this.initAdaptiveSize();
						}, 100);
					}
				})
				query.exec()
			},
			drawCircle(percent = 0) {
				if (!this.sizeNum || this.sizeNum < this.strokeWidthNum || percent < 0 || percent > 100) return;
				const ctx = uni.createCanvasContext(`cu-circle-${this.cid}`, this)
				const centerX = this.sizeNum / 2
				const centerY = this.sizeNum / 2
				const radius = (this.sizeNum - this.strokeWidthNum) / 2
				const startAngle = -Math.PI / 2
				const endAngle = startAngle + (percent / 100) * 2 * Math.PI
				if (!this.isRing) {
					// 绘制背景圆
					ctx.beginPath()
					ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
					ctx.setFillStyle(this.bgColor)
					ctx.fill()
				}
				// 绘制轨道圆环
				ctx.beginPath()
				ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
				ctx.setLineWidth(this.strokeWidthNum)
				ctx.setStrokeStyle(this.strokeColor)
				ctx.setLineCap('round')
				ctx.stroke()
				// 绘制进度圆环
				ctx.beginPath()
				ctx.arc(centerX, centerY, radius, startAngle, endAngle)
				ctx.setLineWidth(this.strokeWidthNum)
				ctx.setStrokeStyle(this.progressColor)
				ctx.setLineCap('round')
				ctx.stroke()
				ctx.draw(true)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.cu-circle {
		width: 100%;
		position: relative;

		.content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			font-size: 24rpx;
			color: #fff;
			z-index: 1;
		}
	}
</style>